<template>
  <div id="cornerComment" v-if="dialogVisible">
    <div class="cornerComment-in">
      <div class="cornerComment-in-title">
        <span>【{{ studentName }}】【{{ optionData.name }}】</span>
        <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
      </div>
      <div class="commentBody">
        <div v-if="listState">
          <div id="development_Study" class="home_top_Development" ref="development_Study"></div>
        </div>
        <div v-else class="not-data-line">
          未找到历史评测记录
        </div>
      </div>
      <div class="cornerComment-in-footer">
        <el-button @click.native="closePOpup" size="small">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {collectionIndex} from '@/api/admin/collection'

let echarts = require('echarts')

export default {
  props: ['visible', 'studentId', 'studentName', 'optionData'], // recruitmentType examine 审核
  components: {},
  data() {
    return {
      dialogVisible: false,
      listState: true
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        this.getWeekFood()
      } else {
        this.listState = true
      }
    }
  },
  created() {
  },
  methods: {
    getWeekFood() {
      collectionIndex({student_id: this.studentId, p: 0, assess_id: this.optionData.id}).then(res => {
        if (res.list.length) {
          let data_time = []
          let data_option = []
          for (let item of res.list) {
            data_time.push(item.create_time.split(' ')[0])
            data_option.push(item.score)
          }
          this.pinzhiEchart(data_time, data_option)
        } else {
          this.listState = false
        }

      })
    },
    // 关闭弹窗
    closePOpup() {
      this.$emit('update:visible', false)
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
    rowClick(row, column, event) {
      console.log('row:', row, column, event)
    },
    pinzhiEchart(timeOption, dataoption) {
      let bar_dv_Study = this.$refs.development_Study;
      let myChart_Study = echarts.init(bar_dv_Study,null, {devicePixelRatio: 2.5})
      let that = this
      let option_Study = {
        toolbox: {
          feature: {
            saveAsImage: {
              name: `${this.studentName}【${this.optionData.name}】曲线图`,
            }
          }
        },
        xAxis: {
          type: 'category',
          data: timeOption
        },
        yAxis: {
          type: 'value'
        },
        grid: {
          top: 30,
          left: 10,
          bottom: 5,
          right: 10,
          containLabel: true
        },
        series: [
          {
            data: dataoption,
            type: 'line',
            symbol: 'triangle',
            symbolSize: 16,
            lineStyle: {
              color: '#5470C6',
              width: 2,
              type: 'solid'
            },
            itemStyle: {
              borderWidth: 3,
              borderColor: '#EE6666',
              color: 'yellow',
              normal: {
                label: {
                  show: true,  //开启显示
                  position: 'top',  //在上方显示
                  textStyle: {  //数值样式
                    color: 'black',
                    fontSize: 12
                  },
                  formatter: function (v) {
                    return `${v.data}${that.optionData.type === 1 ? '秒' : '次'}`
                  },
                }
              }
            }
          }
        ]
      };
      myChart_Study.setOption(option_Study)
    },
  },
  mounted() {
  }
}
</script>
<style scoped>
#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.cornerComment-in {
  width: 900px;
  height: auto;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

#development_Study {
  height: 500px;
  width: 100%;
}

.commentBody {
  padding: 10px;
  flex: 1;
  overflow-y: auto;
}

.close-Btn-line {
  cursor: pointer;
}

.resruitment-title {
  padding: 5px 0;
  border-bottom: 2px solid #abd3f3;
  margin-bottom: 20px;
}

.el-radio {
  margin-right: 20px;
}

.jobTime {
  display: flex;
  align-items: center;
}

.jobTime span {
  padding: 0 10px;
}

.food-body {
  display: flex;
}

.food-list {
  border: 1px solid #cacaca;
  margin-right: 5px;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 2px 2px #c5c5c5;
}

.food-list:last-child {
  margin-right: 0;
}

.food-list-title {
  background: #1b8de5;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #fff;
}

.not-data-point {
  width: 400px;
  height: 400px;
  line-height: 400px;
  text-align: center;
  color: #999;
}
.not-data-line{
  text-align: center;
  padding: 60px;
}
</style>
